<template>
  <section class="wp-board">
      <div class="board-search">
        <el-select v-model="searchParams.queryType" placeholder="请选择" @change="selectQueryType">
          <el-option value="today" label="今天"></el-option>
          <el-option value="yesterday" label="昨天"></el-option>
          <el-option value="week" label="本周"></el-option>
          <el-option value="lastWeek" label="本周"></el-option>
          <el-option value="month" label="本月"></el-option>
          <el-option value="lastMonth" label="上月"></el-option>
          <el-option value="quarter" label="本季度"></el-option>
          <el-option value="lastQuarter" label="上季度"></el-option>
          <el-option value="year" label="本年"></el-option>
          <el-option value="lastYear" label="去年"></el-option>
          <el-option value="" label="自定义"></el-option>
        </el-select>
          <Date-picker v-if="isDiyTime" align="left"   v-model="searchParams"  @change="selectQueryDate"/>
      </div>
      <div class="board-doughnut">
        <div id="item-customer" class="item"></div>
        <div id="item-order" class="item"></div>
        <div id="item-contract" class="item"></div>
      </div>
      <!-- <div class="board-info">
          <div id="item-bar" class="bar"></div>
      </div> -->
      <div class="flex-row">
        <div class="board-box">
          <div class="title">回款完成率</div>
          <div class="flex-column">
            <div id="dashboard-item" class="dashboard-stage"></div>
            <div class="dashboard-bottom flex-row">
              <div class="flex-column desc">
                <div>目标</div>
                <div>{{this.totalAmount}}</div>
              </div>
              <div class="flex-column desc">
                <div>已回款金额</div>
                <div>{{this.receivedAmount}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="board-box">
            <div class="title">遗忘提醒</div>
            <div class="card">
              <div class="card-item" v-for="(item,index) in remindInfoList" @click="toDetail(item)" :key="index">
                <div>{{item.desc}}</div>
                <div><span class="text">{{item.count}}</span><span>个</span></div>
              </div>
            </div>
        </div>
      </div>
      <Customer :params="remindDetail" :visible.sync="visible"/>
  </section>
</template>

<script>
import * as echarts from 'echarts'
import DatePicker from '@/components/DatePicker'
import Mixins from './mixins'
import Customer from './detail/customer'
import {toDecimal} from '@/utils'
export default {
  components: {DatePicker, Customer},
  data () {
    return {
      searchParams: {
        queryType: 'month'
      },
      isDiyTime: false,
      visible: false,
      remindDetail: {},
      totalAmount: null,
      receivedAmount: null,
      remindInfoList: []
    }
  },
  mixins: [Mixins],
  mounted () {
    this.queryForgottenCustomerCount(this.searchParams)
    this.queryDataList()
    // this.drawBar('item-bar', '客户')
  },
  methods: {
    selectQueryType (val) {
      if (!val || val === '') {
        this.isDiyTime = true
      } else {
        this.isDiyTime = false
        this.queryDataList()
      }
    },
    selectQueryDate (date) {
      this.queryDataList()
    },
    queryDataList () {
      this.queryDataStatisticsCount(this.searchParams)
      this.queryCollectionStatisticsInfo(this.searchParams)
    },
    queryDataStatisticsCount (params) {
      this.requestOption('queryDataStatisticsCount', params, res => {
        if (res.code === 0) {
          const resInfo = res.data
          var customerList = [{value: resInfo.customerCount||0, name: '新增客户'}]
          var orderList = [{value: resInfo.orderCount||0, name: '新增订单'}]
          var contractList = [{value: resInfo.contractCount||0, name: '新增合同'}]
          this.drawDoughnut('item-customer', '客户', resInfo.customerCount||0, '新增客户', customerList, ['#5cBB7a'])
          this.drawDoughnut('item-order', '订单', resInfo.orderCount||0, '新增订单', orderList, ['#409EFF'])
          this.drawDoughnut('item-contract', '合同', resInfo.contractCount||0, '新增合同', contractList, ['#E6A23C'])
        }
      })
    },
    toDetail (item) {
      this.visible = true
      this.remindDetail = {...item}
    },
    queryCollectionStatisticsInfo (params) {
      this.requestOption('queryCollectionStatisticsInfo', params, res => {
        if (res.code === 0) {
          const refInfo = res.data
          this.receivedAmount = refInfo && refInfo.receivedAmount ? refInfo.receivedAmount : 0
          this.totalAmount = refInfo && refInfo.totalAmount ? refInfo.totalAmount : 0
          this.drawGaugeStage('dashboard-item', this.calculateCollectionRate(this.receivedAmount, this.totalAmount))
        }
      })
    },
    calculateCollectionRate (receivedAmount, totalAmount) {
      return toDecimal(totalAmount && totalAmount > 0 ? (receivedAmount||0) / totalAmount * 100 : 0)
    },
    queryForgottenCustomerCount (params) {
      this.requestOption('queryForgottenCustomerCount', params, res => {
        if (res.code === 0) {
          this.remindInfoList = res.data || []
        }
      })
    },
    drawDoughnut (id, name, titleText, subText, data, color = ['#27D9C8']) {
      var myChart = echarts.init(document.getElementById(id))
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}'
        },
        color: color,
        title: {
          text: titleText,
          left: 'center',
          top: '50%',
          textStyle: {
            fontSize: 20,
            align: 'center'
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '40%',
          style: {
            text: subText,
            textAlign: 'center',
            fill: '#333',
            fontSize: 20,
            fontWeight: 700
          }
        },
        series: [
          {
            name: name,
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: data
          }
        ]
      }
      myChart.setOption(option)
    },
    drawBar (id, titleText) {
      var myChart = echarts.init(document.getElementById(id))
      var options = {
        title: {
          text: titleText,
          left: 'left',
          textStyle: {
            // color: '#27D9C8',
            fontSize: 30,
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          left: 'right',
          data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: false },
        //     dataView: { show: false, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: false },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
          },
          {
            name: 'Steppe',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
          },
          {
            name: 'Desert',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190]
          },
          {
            name: 'Wetland',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [98, 77, 101, 99, 40]
          }
        ]
      }
      myChart.setOption(options)
    },
    drawGaugeStage (id, value = 100) {
      var myChart = echarts.init(document.getElementById(id))
      var option = {

        tooltip: {
          show: true,
          formatter: '{a} <br/>{b}: {c}%',
          backgroundColor: 'rgba(51, 51, 51,0.8)',
          borderColor: 'rgba(51, 51, 51,0.8)',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '回款',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.3, '#fd666d'],
                  [0.8, '#E6A23C'],
                  [1, '#67C23A']
                ]
              }
            },
            pointer: {
              showAbove: false,
              itemStyle: {
                color: 'auto'
              }
            },
            title: {
              offsetCenter: [0, '-50%'],
              fontSize: 14
            },
            axisTick: {
              show: false,
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              show: false,
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              distance: 30,
              fontSize: 14
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'inherit'
            },
            data: [
              {
                name: '完成率',
                value: value
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.wp-board{
    width: 100%;
    height: 100%;
    background: #efefef;
    padding: 0 10px;
    overflow:auto;
    .board-search{
      position:fixed;
      background: #efefef;
      height: 60px;
      line-height: 60px;
      width: 100%;
      z-index: 100;
    }
    .board-doughnut{
       margin-top: 60px;
       background: #fff;
       width: 100%;
       display: flex;
       flex-direction:row;
       justify-content: space-around;
      .item{
        width: calc(33%);
        height: 230px;
      }
    }
    .board-info{
      background: #fff;
      .bar{
        height: 200px;
      }
    }
    .board-box{
      width: 49%;
      margin-top: 10px;
      background: #fff;
      padding: 10px;
        .dashboard-bottom{
          min-height: 40px;
          margin-top: -60px;
          .desc{
            padding: 0 20px;
            font-size: 14px;
            div{
              margin-bottom: 10px;
            }
          }
        }
        .dashboard-stage{
          width: 100%;
          height: 350px;
        }
    }
}
.flex-column{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title{
  margin-bottom: 10px;
}
.card{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.card-item{
  width: 230px;
  height: 80px;
  cursor: pointer;
  padding: 15px;
  margin: 5px 5px;
  box-shadow: 0 0 16px 0 rgba(0,0,0,.08);
  border-radius: 4px;
  .text{
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    margin-top: 8px;
    margin-right: 5px;
    color: #2362fb;
  }
}
.card-item:hover{
  box-shadow: 0 0 16px 0 rgba(0,0,0,.2)
}
</style>
